<template>
  <ContentWrap>
    <el-form class="-mb-15px" :model="form" ref="formRef" :inline="true" label-width="128px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="二维码内容" prop="text">
            <el-input v-model="form.text" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="二维码宽度" prop="width">
            <el-input-number v-model="form.width" :min="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="二维码高度" prop="height">
            <el-input-number v-model="form.height" :min="1" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="前景色" prop="dark">
            <el-color-picker v-model="form.dark" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="背景色" prop="light">
            <el-color-picker v-model="form.light" /> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="二维码边距" prop="margin">
            <el-input-number v-model="form.margin" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          type="primary"
          @click="getQrcode"
          :disabled="!form.text || !form.width || !form.height"
          >生成二维码</el-button
        >
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap> <canvas id="qrCode"></canvas></ContentWrap>
</template>
<script setup lang="tsx" name="Qrcode">
import QRCode from 'qrcode' //引入生成二维码插件
const form = ref({
  text: '',
  width: 200,
  height: 200,
  margin: 1,
  dark: '#333333',
  light: '#ffffff',
  errorCorrectionLevel: 'H'
})

const formRef = ref()

const getQrcode = () => {
  let opts = {
    errorCorrectionLevel: form.value.errorCorrectionLevel, //容错级别
    type: 'image/png', //生成的二维码类型
    quality: 0.3, //二维码质量
    margin: form.value.margin, //二维码留白边距
    width: form.value.width, //宽
    height: form.value.height, //高
    text: form.value.text, //二维码内容
    color: {
      dark: form.value.dark, //前景色
      light: form.value.light //背景色
    }
  }
  QRCode.toCanvas(document.getElementById('qrCode'), form.value.text, opts, function (error) {
    console.log(error)
  })
}

/** 初始化 **/
onMounted(() => {})
</script>
